<template>
    <el-dialog v-model="showDialog" close-on-click-modal title="来信分类规则" modal-class="email-item-rule-modal" :show-close="false" width="550px">
        <div class="content">
            <p class="bold tips mb30 font16">收到新邮件时，规则如下</p>
            <p class="bold tips mb8 font14">当符合下列所有条件：</p>
            <rule-item title="收件人" v-model="receiverRuleList" />
            <rule-item title="主题"  v-model="subjectRuleList" />
            <rule-item title="发件人"  v-model="senderRuleList" />
            <p class="bold tips mb8 mt20 font14">执行下列操作：</p>
            <div class="flex-row mb10 rule-item-wrap">
                移动邮件
                <p style="margin: 0 4px;">到</p>
                <el-cascader
                v-model="ruleData.folder"
                :options="options"
                :props="cascaderProps"
                size="small"
                style="width: 330px;"
                />
            </div>
            <div>
                <el-checkbox v-model="ruleData.isHistory" /> 是否作用于历史邮件
            </div>
            <div>
                <el-checkbox v-model="ruleData.isSeen" /> 是否标记为已读
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button size="small" @click="closeRule">取消</el-button>
                <el-button size="small" type="primary" @click="saveRule">保存</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { onMounted, ref  } from 'vue';
import { storeToRefs } from 'pinia';
import { useEmail } from '/@/stores/email';
import pinia from '/@/stores/index';
import api from "/@/api/email/index";
import RuleItem from './ruleItem.vue';

// 定义父组件传过来的值
const props = defineProps({
	id : {
		type: String,
		default: () => '',
	}
});

  const receiverRuleList = ref<any>([]);
  const senderRuleList = ref<any>([]);
  const subjectRuleList = ref<any>([]);
  const showDialog = ref(false);

//   const emailRuleList = ref<any>([])
//   const currentRuleId = ref<string>('');
  const stores = useEmail(pinia);
  const { curAccount } = storeToRefs(stores);

  const ruleData = ref<any>({});
  const emit = defineEmits(['close']);

  const cascaderProps = {
    expandTrigger: 'hover' as const,
    label: 'folderName',
    value: 'folderName',
    emitPath: false,
    checkStrictly: true 
  }
  const options = ref([]);
  const currentAccout = ref<any>(curAccount.value);
  
  const closeRule = () => {
    emit('close');
  };

  const saveRule = async () => {
    const saveData = {
        account: curAccount.value,
        addressers: senderRuleList.value,
        ...ruleData.value,
        isHistory: ruleData.value.isHistory ? 1 : 0,
        isSeen: ruleData.value.isSeen ? 1 : 0,
        recipientss: receiverRuleList.value,
        status: 0,
        themes: subjectRuleList.value
    };

    const saveFun = props.id ? api.rule.editItem : api.rule.addItem;
    const res = await saveFun(saveData);
    if (res.code === 200) {
        emit('close', true);
    }
  };

  const getFolderList = async () => {
    if (!currentAccout.value) {
      return;
    }
    api.folder.getList(currentAccout.value).then((res: any) => {
      options.value = res.data.filter((item: any) => {
        return ['星标邮件', '草稿箱'].indexOf(item.folderName) === -1;
      });
    });
  };

onMounted(() => {
    getFolderList();
    if (props.id) {
        api.rule.getItem(props.id).then((res: any) => {
            if (res.code === 200) {
                const { folder, isSeen, isHistory } = res.data;
                ruleData.value = {
                    folder,
                    isSeen: !!isSeen,
                    isHistory: !!isHistory
                };

                if (res.data.addressers) {
                    senderRuleList.value = res.data.addressers;
                }

                if (res.data.recipientss) {
                    receiverRuleList.value = res.data.recipientss;
                }

                if (res.data.themes) {
                    subjectRuleList.value = res.data.themes;
                }
            }
        });
    }
});
  defineExpose({
    showDialog
  })
</script>
<style lang="scss" scoped>
.content {
    max-height: 400px;
}
</style>